willy718066
function App() {
const [inputState, setInputState] = useState([]);
return (
<>
<label htmlFor="username">username {inputState}</label>
<input
type="text"
id="username"
value={inputState}
onChange={(e) => {
setInputState(e.target.value);
}}
/>
</>
);
}
function App() {
const optionList = ["Taipei", "Taichung", "Kaohsiung"];
const [selectState, setSelectState] = useState([]);
return (
<>
{selectState}
<select
name=""
id=""
value={selectState}
/*+ multiple={true} */
onChange={(e) => {
setSelectState(e.target.value);
/*setSelectState(
[...e.target.selectedOptions].map((option) => option.value)
); */
}}
>
<option value="Choose the area" disabled>
Choose the area
</option>
{optionList.map((location) => {
return (
<option value={location} key={location}>
{location}
</option>
);
})}
</select>
</>
);
}
function App() {
const [check, setCheck] = useState(false);
return (
<>
<label htmlFor="isCheck">確認狀態 {check.toString()}</label>
<input
type="checkbox"
id="isCheck"
onChange={(e) => {
setCheck(e.target.checked);
}}
value={check}
/>
</>
);
}
function App() {
const [checkList, setCheckList] = useState([]);
const handleCheckList = (e) => {
if (e.target.checked) {
setCheckList([...checkList, e.target.value]);
} else {
setCheckList(checkList.filter((item) => item !== e.target.value));
}
};
return (
<>
<label htmlFor="checkList1">item1</label>
<input
type="checkbox"
id="checkList1"
name="like"
value="item1"
onChange={handleCheckList}
/>
<label htmlFor="checkList2">item2</label>
<input
type="checkbox"
id="checkList2"
name="like"
value="item2"
onChange={handleCheckList}
/>
<label htmlFor="checkList3">item3</label>
<input
type="checkbox"
id="checkList3"
name="like"
value="item3"
onChange={handleCheckList}
/>
</>
);
}
function App() {
const [formData, setFormData] = useState({
username: "test",
password: "123321",
isCheck: false,
});
const handleInputChange = (e) => {
const value =
e.target.type === "checkbox" ? e.target.checked : e.target.value;
const name = e.target.name;
setFormData({
...formData,
[name]: value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<>
<form action="">
<div className="mb-3">
<label htmlFor="username" className="form-label">
帳號
</label>
<input
type="text"
id="username"
className="form-control"
name="username"
onChange={handleInputChange}
value={formData.username}
/>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">
密碼
</label>
<input
type="text"
id="password"
className="form-control"
name="password"
onChange={handleInputChange}
value={formData.password}
/>
</div>
<div className="mb-3">
<label htmlFor="isCheck">確認狀態</label>
<input
type="checkbox"
id="isCheck"
className="isCheck"
name="isCheck"
onChange={handleInputChange}
value={formData.isCheck}
/>
</div>
<button
type="submit"
className="btn btn-primary"
onClick={handleSubmit}
>
送出
</button>
</form>
</>
);
}
function App() {
const [search, setSearch] = useState();
const formHandleSubmit = (e) => {
e.preventDefault();
console.log("開始搜尋:", search);
};
const enterHandleSubmit = (e) => {
if (e.key === "Enter") {
console.log("開始搜尋:", search);
}
};
return (
<>
{/* Way1 */}
<form onSubmit={formHandleSubmit}>
<div className="mb-3">
<label htmlFor="search2" className="form-label">
Search
</label>
<input
type="text"
name="search"
id="search2"
className="form-control"
/>
</div>
</form>
{/* Way2 */}
<label htmlFor="search1" className="form-label">
Search
</label>
<input
type="search"
id="search1"
className="form-control"
name="search"
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
onKeyDown={enterHandleSubmit}
/>
</>
);
}
建立環境npm install react-hook-form
import { useForm } from "react-hook-form";
function App() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<form action="" onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="username" className="form-label"></label>
<input
type="text"
name="username"
id="username "
defaultValue="Willy"
{...register("username")} //'username'可在其他input換成email等其他data
className="form-control"
/>
</div>
<button type="submit" className="btn btn-primary">
註冊
</button>
</form>
</>
);
}
import { useForm } from "react-hook-form";
function App() {
const { register, handleSubmit, watch, setValue, control } = useForm({
defaultValues: {
username: "Willy",
},
});
const onSubmit = (data) => {
console.log(data);
};
//watch
// useEffect(() => {
// const subscription = watch((value, { name }) => {
// console.log(value, { name });
// if (name === "like") {
// setValue("username", "Will");
// }
// });
// console.log(subscription);
// return () => subscription.unsubscribe();
// }, [watch]);
//差異：useWatch 子層元件更新 不影響父層render
const watchForm = useWatch({
control,
});
useEffect(() => {
console.log(watchForm);
}, [watchForm]);
return (
<>
<div>
<form action="" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-3">
<label htmlFor="username" className="form-label">
Username
</label>
<input
type="text"
name="username"
id="username"
{...register("username")}
className="form-control"
/>
</div>
<div className="mb-3">
<label htmlFor="checkList1">item1</label>
<input
type="checkbox"
name="like"
id="checkList1"
value="item1"
{...register("like")}
/>
<label htmlFor="checkList2">item2</label>
<input
type="checkbox"
name="like"
id="checkList2"
value="item2"
{...register("like")}
/>
<label htmlFor="checkList3">item3</label>
<input
type="checkbox"
name="like"
id="checkList3"
value="item3"
{...register("like")}
/>
</div>
<button type="submit" className="btn btn-primary">
Register
</button>
</form>
</div>
</>
);
}
BS 驗證樣式
快速生成表單程式碼(官方)
form驗證方法
若未安裝bs 先在terminal 輸入npm i bootstrap
import { useForm } from "react-hook-form";
import Checkbox from "./Checkbox";
import Input from "./Input";
function App() {
const {
register,
formState: { errors },
handleSubmit,
getValues,
control,
} = useForm({});
const onSubmit = (data) => console.log(data);
console.log("errors:", errors);
const checkbox = [
{ id: "checkList1", checkboxText: "item1" },
{ id: "checkList2", checkboxText: "item2" },
{
id: "checkList3",
checkboxText: "item3",
rules: { //rules放第幾個都行(或是全放也可)
required: {
value: true,
message: "至少勾選一項",
},
},
},
{ id: "checkList4", checkboxText: "item4" },
{ id: "checkList5", checkboxText: "item5" },
];
return (
<>
<div>
<form action="" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-3">
<Input
register={register}
errors={errors}
id="username"
labelText="Username"
type="text"
rules={{
required: {
value: true,
message: "必填",
},
}}
/>
</div>
<div className="mb-3">
<Input
register={register}
errors={errors}
id="email"
labelText="Email"
type="email"
rules={{
required: {
value: true,
message: "必填",
},
pattern: {
value: /^\S+@\S+$/i,
message: "格式錯誤",
},
}}
/>
</div>
<div className="mb-3">
<Input
register={register}
errors={errors}
id="tel"
labelText="Tel"
type="tel"
rules={{
required: {
value: true,
message: "必填",
},
minLength: {
value: 8,
message: "至少8碼",
},
maxLength: {
value: 12,
message: "不超過12碼",
},
}}
/>
</div>
<div className="mb-3">
{checkbox.map((checkbox, idx, arr) => (
<Checkbox
key={checkbox.id}
register={register}
errors={errors}
type="checkbox"
name="like"
id={checkbox.id}
checkboxText={checkbox.checkboxText}
rules={checkbox.rules}
checkboxLen={arr.length}
/>
))}
</div>
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
</div>
</>
);
}
export default App;
//Input.jsx
/* eslint-disable react/prop-types */
const Input = ({ register, errors, id, labelText, type, rules }) => {
return (
<div className="mb-3">
<label htmlFor={id} className="form-label">
{labelText}
</label>
<input
type={type}
name={id}
id={id}
{...register(id, rules)}
className={`form-control ${errors[id] && "is-invalid"}`}
/>
{errors[id] && (
<div className="invalid-feedback">{errors?.[id]?.message}</div>
)}
</div>
);
};
export default Input;
//Checkbox.jsx
/* eslint-disable react/prop-types */
const Checkbox = ({
register,
errors,
type,
name,
id,
rules,
checkboxText,
checkboxLen,
}) => {
return (
<div className="form-check">
<input
type={type}
name={name}
id={id}
className={`form-check-input ${errors[name] && "is-invalid"}`}
{...register(name, rules)}
value={checkboxText}
/>
<label htmlFor={id} className="form-check-label">
{checkboxText}
</label>
{errors.like && id === `checkList${checkboxLen}` && (
<div className="invalid-feedback">{errors?.like?.message}</div>
)}
</div>
);
};
export default Checkbox;
道德和合法性是Assignment代写 http://australiaway.org/a/assignmentdaixie/ 机构必须严格遵守的基本原则。在提供代写服务时，机构需要确保服务的合法性和合规性，避免违反学术道德和法律法规。首先，代写机构应明确告知客户服务的性质和用途，确保客户不会将代写的文章用于学术欺诈或其他不正当用途。其次，机构应遵守相关法律法规，确保服务的合法性和透明度。此外，代写机构还应建立严格的内部管理制度和监督机制，确保员工和作者遵守职业道德和行为规范，杜绝抄袭、剽窃等学术不端行为。通过严格遵守道德和合法性原则，代写机构能够树立良好的企业形象，赢得客户的信赖和支持。
This blog provides great insights into troubleshooting and optimizing IT systems. It's always helpful to get detailed guides like this. For students juggling academics and technical challenges, services like Write My Dissertation Services in Ireland can offer the support you need to complete your work with ease and precision.
iThome鐵人賽
看影片追技術